<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function delay(delay) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(`延迟了${delay}秒`)
            // reject('我失败了')
          }, delay * 1000)
        })
      }

      async function func1() {
        const res1 = await delay(1)
        console.log('res1', res1)
        const res3 = await delay(3)
        console.log('res3', res3)
      }
      async function func2() {
        const res2 = await delay(2)
        console.log('res2', res2)
        const res4 = await delay(4)
        console.log('res4', res4)
      }
      // console.log(func1()) // async函数返回的是一个promise
      // 既然是promise 就可以用await等待
      // 情况一：
      //   func1()
      //   func2() // 1 2 3 4
      // 情况二：
      //   async function func3() {
      //     //   const func1Result = await func1() // 既然是promise 就可以用await等待
      //     // console.log('func1Result', func1Result) // undefined ：因为func1里面没有返回任何东西，我们只是纯等待
      //     await func1()
      //     func2()
      //   }
      //   func3() // 1 3 2 4
      // 情况三
      console.log('top')
      func1()
      console.log('bottom')
      // top bottom res1 res3 ：原因是await之后阻塞async函数内部的执行顺序，不会影响函数外部
    </script>
  </body>
</html>
